<template>
	<div>
		<div class="return-home">
			<router-link to="/home">
				<p class="return-text">
					<van-icon name="arrow-left" />返回
				</p>
			</router-link>
			<p class="bufan">不凡</p>
		</div>
		<!-- 标签栏 -->
		<van-tabs v-model="activeName" @click="tabEvents">
		  <van-tab :name="item.name"  :title="item.name" v-for="item in navData" :key="item.id"></van-tab>
		 
		</van-tabs>
		
		<!-- 展示图片区 -->
		<div class="TheHome-txt">
			<p>{{texts.name}}</p>
			<span>{{texts.front_name}}</span>
		</div>
		
		<div class="TheHome-img" >
				
		
			<div v-for="item in currentNav" :key="item.id" class="TheHome-content">
				
				<img :src="item.list_pic_url" alt="">
				<span>{{item.name}}</span>
				<p>&#165{{item.retail_price}}</p>
			</div>
		</div>
		
		<!-- 这个标签别动↓↓↓↓↓ -->
	</div>
</template>

<script>
	import{
		categoryNav,
		goodsList
		
	}  from "../../../api/cation/index.js"
	
	export default{
		data(){
			return{
				 activeName:"",
				navData:[],
				currentNav:[],
				texts:[],
				
			}
		},
		created(){
			this.init()
		},
		methods:{
			async init(){
				var res = await categoryNav({
					id:this.$route.query.id	
				})
				this.navData = res.data.navData
				this.texts = res.data.currentNav
				this.activeName =  res.data.currentNav.name
				
				var result = await goodsList({
					categoryId:this.$route.query.id	
				})
				
				this.currentNav = result.data.data
			},
			async  tabEvents(val1,val2){
			var id = this.navData.find(ele =>ele.name == val1).id;
			
			var result = await goodsList({
				categoryId:id	
			})
			
			this.currentNav = result.data.data
			this.texts = result.data.currentNav
			}
			
		}
	}
</script>

<style scoped lang="scss">
	@import "../scss/index.scss";
	// 头部
		.return-home {
			display: flex;
			font-size: 16px;
			margin-left: 20px;
	
			.return-text {
				color: blue;
			}
	
			.bufan {
				margin-left: 60px;
			}
		}
		// 展示图片区上面文字
		.TheHome-txt{
			text-align: center;
			p{
				margin-bottom: .24rem;
				    font-size: .4rem;
				    color: #333;
				}
			}
			span{
				display: block;
				    height: .32rem;
				    font-size: .32rem;
				    color: #999;
			}
		
		
		// 展示图片区
		.TheHome-img{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.TheHome-content{
				width: 50%;
				text-align: center;
				
				img{
					margin: 0 auto;
					width: 150px;
					height: 150px;
					display: block;
				}
			}
		}
		
</style>
